<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
// import { NButton, useMessage } from 'naive-ui';
import type { DataTableColumns } from 'naive-ui';
type Song = {
  no: number;
  title: string;
  length: string;
  status: boolean;
};
const model = ref<any>({
  datasource: '全部'
});

const wordOptions = ref<any>([{ value: 1, label: '全部' }]);
const range = ref<[number, number]>([1704038400000, Date.now()]);
// echarts 图表
const chartContainer = ref(null);
const chartData = ref({
  categories: ['2024-01-01', '2024-05-01', '2024-05-014'],
  series: [120, 200, 150]
});
const initChart = () => {
  const container = chartContainer.value;
  const chartInstance = echarts.init(container);
  const option = {
    title: {
      text: '调用量统计'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      // data: ['']
    },
    xAxis: {
      data: chartData.value.categories,
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {},
    series: [
      {
        name: '调用量',
        type: 'bar',
        data: chartData.value.series
      }
    ]
  };

  chartInstance.setOption(option);
};

// 表格数据
const data = ref([
  { id: 1, riqi: '2024-01-01 20:20:28', types: 'MODDLEA', outkoken: 222, puttoken: 222, shuchu: 22, users: 'AA' }
]);
const createColumns = (): DataTableColumns<Song> => {
  return [
    {
      title: '日期',
      key: 'riqi',
      align: 'center',
      resizable: true
    },

    {
      title: '调用模型',
      key: 'types',
      align: 'center',
      resizable: true,
      minWidth: 100,
      maxWidth: 500
    },

    {
      title: '消耗token',
      key: 'outkoken',
      align: 'center',
      resizable: true,
      minWidth: 100,
      maxWidth: 500
    },

    {
      title: '输入token',
      key: 'puttoken',
      align: 'center',
      resizable: true,
      minWidth: 100,
      maxWidth: 500
    },

    {
      title: '输出token',
      key: 'shuchu',
      align: 'center',
      resizable: true,
      minWidth: 100,
      maxWidth: 500
    },

    {
      title: '操作人',
      key: 'users',
      align: 'center',
      resizable: true,
      minWidth: 100,
      maxWidth: 500
    }
  ];
};

const columns = createColumns();
// 切换
const handleTabChange = (name: string) => {
  console.log('Current tab:', name);
};
const handleTabChange1 = (names: string) => {
  console.log('Current tab:', names);
  initChart();
};
onMounted(() => {
  initChart();

  window.addEventListener('resize', initChart); // 监听窗口大小变化，重新初始化图表
});
</script>

<template>
  <div>
    <NCard>
      <div class="w-300px flex">
        <NGradientText
          :gradient="{
            from: 'black',
            to: 'black'
          }"
        >
          数据来源：
        </NGradientText>
        <NSelect v-model:value="model.datasource" :options="wordOptions" placeholder="请选择" size="small" />
      </div>
      <div class="mt-30px flex">
        <div class="w-60%">
          <NTabs type="segment" animated @update:value="handleTabChange">
            <NTabPane name="chap1" tab="昨天">
              <NTabs default-value="oasis" justify-content="space-evenly" type="line" @update:value="handleTabChange1">
                <NTabPane name="oasis" tab="调用量统计">
                  <div id="chart-container" ref="chartContainer"></div>
                </NTabPane>
                <NTabPane name="the beatles" tab="调用量详情">
                  <NDataTable :columns="columns" :data="data" :bordered="false" />
                </NTabPane>
              </NTabs>
            </NTabPane>
            <NTabPane name="chap2" tab="近3天">3</NTabPane>
            <NTabPane name="chap3" tab="近5天">5</NTabPane>
            <NTabPane name="chap4" tab="近15天">15</NTabPane>
          </NTabs>
        </div>
        <div class="w-40%">
          <NDatePicker v-model:value="range" type="datetimerange" clearable class="ml-50px" />
        </div>
      </div>
    </NCard>
  </div>
</template>

<style scoped>
#chart-container {
  width: 100%;
  height: 400px;
}
</style>
